<template>
  <div class="GO-pro-info-wrap">
    <el-form :model="proFrom" label-width="0" v-if="loaded">
      <h5 class="item-title">
        <span>选择配置的采购项</span>
      </h5>
      <el-form-item>
        <el-select v-model="proFrom.departmentId" placeholder="请选择需要配置的部门"
                   :style="{ width: '280px', marginRight: '10px' }" @change="selectDepartmentFun">
          <el-option v-for="(item, index) in departmentList" :label="item.departName" :value="item.id"
                     :key="index"></el-option>
        </el-select>
        <!--<el-select v-model="proFrom.allBumen" placeholder="全部部门" :style="{ width: '280px' }">
            <el-option label="销售部" value="1"></el-option>
            <el-option label="技术部" value="2"></el-option>
            <el-option label="客服部" value="3"></el-option>
            <el-option label="市场部" value="4"></el-option>
            <el-option label="公关部" value="4"></el-option>
        </el-select>-->
      </el-form-item>
      <div class="line-dashed"></div>
      <h5 class="item-title">
        <span>产品类型</span>
      </h5>
      <el-form-item>
        <el-select @change="changeSearch" v-model="proFrom.proType" placeholder="请选择添加类型"
                   :style="{ width: '280px' }">
          <el-option label="现货类" :value="1"></el-option>
          <el-option label="加工类" :value="3"></el-option>
        </el-select>
        <el-button type="primary" class="clothing-custom-btn" @click="addClothingCustom">团体高定</el-button>
      </el-form-item>
      <h5 class="item-title">
        <span>产品信息</span>
      </h5>
      <el-form-item>
        <el-input placeholder="请输入货号" suffix-icon="el-icon-search" v-model="proFrom.productCode"
                  @keyup.enter.native="changeSearch" :style="{ width: '325px' }"></el-input>
        <!--<el-radio-group class="btn-radio-group" v-model="proFrom.sex" @change="changeSearchType">
            <el-radio-button label="0">男装</el-radio-button>
            <el-radio-button label="1">女装</el-radio-button>
        </el-radio-group>-->
        <el-button type="primary" class="clothing-custom-btn" @click="changeSearch">查询</el-button>
        <!--                <el-button type="primary" class="clothing-custom-btn" @click="addClothingCustom">团体高定</el-button>-->
      </el-form-item>
      <el-form-item class="clothes-sex-list">
        <el-radio-group class="pic-radio-group" v-if="clothingList.length" v-model="proFrom.productId"
                        @change="selectClothing">
          <el-radio v-cloak :label="item.id" v-for="(item, index) in clothingList" :key="index">
            <img :src="item.productImg" alt=""/>
            <span class="No">{{ item.productCode }}</span>
          </el-radio>
        </el-radio-group>
        <div class="empty-box" v-if="!clothingList.length">暂无商品记录~~</div>
        <el-pagination v-if="clothingList.length" background layout="prev, pager, next" :total="clothingTotal"
                       :current-page.sync="clothingPageNo" :page-size="clothingPageSize"
                       @current-change="clothingChangePage"></el-pagination>
      </el-form-item>

      <template>
        <el-form-item v-if="proFrom.proType == 3">
          <el-input placeholder="请输入面料编号" suffix-icon="el-icon-search" v-model="search_fabricCode"
                     :style="{ width: '325px' }"></el-input>
          <el-button type="primary" class="clothing-custom-btn" @click="search_fabrice" style="margin-left: 1px">查询</el-button>
        </el-form-item>

        <h5 class="item-title" v-if="proFrom.proType == 3">
          <span>面料编号</span>
        </h5>
        <el-form-item class="fabric-list" v-if="proFrom.proType == 3">
          <el-radio-group class="pic-radio-group" v-model="proFrom.fabricId">
            <el-radio :label="item.id" v-for="(item, index) in fabricList" :key="index">
              <div class="pic-box">
                <!--<img style="object-fit:contain" :src="item.fabricImg" alt=""/>-->
                <el-image
                    style="width: 100%;height: 100%"
                    :src="item.fabricImg"
                    fit="cover"></el-image>
              </div>
              <span class="No">{{ item.fabricCode }}</span>
              <span class="inventory" @click="buyFabric(item)">当前库存：{{ item.inventory }}{{ item.fabricUnit }}</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <h5 class="item-title" v-show="proFrom.proType!=''">
          <span>绣字</span>
        </h5>
        <el-form-item>
          <el-select v-model="xiuziType" v-show="proFrom.proType!=''" placeholder="选择绣字类型"
                     :style="{ width: '360px', marginRight: '10px' }">
            <el-option label="无绣字" value="无绣字"></el-option>
            <el-option label="文字" value="文字"></el-option>
            <el-option label="图片" value="图片"></el-option>
            <el-option label="自定义图片" value="自定义图片"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="proFrom.proType!='' && xiuziType!='无绣字'">
          <el-select v-model="proFrom.fontLocaltion" placeholder="选择绣字位置"
                     :style="{ width: '360px', marginRight: '10px' }">
            <el-option :label="item.xiuziLocaltion" :value="item.id" :key="index"
                       v-for="(item, index) in fontLocaltionList"></el-option>
            <el-option label="不绣字" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="proFrom.proType!='' && xiuziType!='无绣字'">
          <el-input placeholder="请填写第一行绣字内容" v-model="proFrom.oneXZ"
                    :style="{ width: '360px', marginRight: '10px' }"></el-input>
          <el-input placeholder="请填写第二行绣字内容" v-model="proFrom.twoXZ" :style="{ width: '360px' }"></el-input>
        </el-form-item>
        <h5 class="item-title" v-show="proFrom.proType!='' && xiuziType!='无绣字'">
          <span>字体选择</span>
        </h5>
        <el-form-item class="font-family-list" v-show="proFrom.proType!='' && xiuziType!='无绣字'">
          <el-radio-group class="pic-radio-group" v-model="proFrom.fontId">
            <el-radio :label="item.id" v-for="(item, index) in fontList" :key="index">
              <img :src="item.embroideredImage" alt=""/>
              <span class="No">{{ item.embroideredName }}</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <h5 class="item-title" v-show="proFrom.proType!='' && xiuziType!='无绣字'">
          <span>颜色选择</span>
        </h5>
        <el-form-item class="font-family-list" v-show="proFrom.proType!='' && xiuziType!='无绣字'">
          <el-radio-group class="pic-radio-group" v-model="proFrom.colorId">
            <el-radio :label="item.id" v-for="(item, index) in colorList" :key="index">
              <img :src="item.colorImg" alt=""/>
              <span class="No">{{ item.colorName }}</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <h5 class="item-title">
        <span>产品备注信息</span>
      </h5>
      <el-form-item>
        <el-input placeholder="请填写产品备注" v-model="proFrom.proName"
                  :style="{ width: '360px', marginRight: '10px' }"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请填订单备注" type="textarea" v-model="proFrom.remark" rows="5"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addProductDepartment">添加到采购项</el-button>
      </el-form-item>
      <!--部门数据列表 start-->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
          <template slot-scope="props">
            <span>{{ props.row.sex == 0 ? '男' : '女' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productCode" label="产品货号" align="center"></el-table-column>
        <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
        <el-table-column prop="xiuziType" label="绣字" align="center">
          <template slot-scope="props">
            <el-button type="text" v-if="props.row.xiuziType == '文字'" size="small" :style="{ color: '#D5A606' }">
              文字
            </el-button>
            <el-button type="text" v-if="props.row.xiuziType == '图片'" size="small" :style="{ color: '#D5A606' }">
              图片
            </el-button>
            <el-button type="text" v-if="props.row.xiuziType == '自定义图片'" size="small" :style="{ color: '#D5A606' }">
              自定义图片
            </el-button>
            <el-button type="text" v-show="props.row.xiuziType == null || props.row.xiuziType == '' || props.row.xiuziType == '无绣字'" size="small"
                       :style="{ color: '#999' }">
              无绣字
            </el-button>
          </template>
        </el-table-column>
<!--        <el-table-column prop="numbers" label="人均配置" align="center"></el-table-column>-->

<!--        <el-table-column prop="numbers" label="人均配置" align="center">-->
<!--            <template slot-scope="props">-->
<!--                <el-button type="text" v-if="props.row.type == 1" size="small" :style="{ color: '#D5A606' }">-->
<!--                    定制款(查看详情)-->
<!--                </el-button>-->
<!--                <span v-else-if="props.row.xzText">{{ props.row.xzText }}</span>-->
<!--                <span v-else>无</span>-->
<!--            </template>-->
<!--        </el-table-column>-->

        <el-table-column prop="zdy" label="产品参数" align="center">
          <template slot-scope="props">
            <el-button type="text" size="small"
                       @click="gotoDetailFunc(props.row.id)"
                       :style="{ color: '#D5A606' }">
              查看详情
            </el-button>
            <!--<span v-else-if="props.row.type == 0">{{ props.row.zdy }}</span>-->
          </template>
        </el-table-column>

        <el-table-column prop="departProductId" label="操作" align="center">
          <template slot-scope="props">

            <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="el-icon-warning" icon-color="#FAAD12"
                           @onConfirm="delete_product(props.row.departProductId,props.row.id)" title="将同时删除此产品关联的员工量体列表，确认删除吗？">
              <el-button slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>

            <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="el-icon-warning" icon-color="#FAAD12"
                           @onConfirm="copy_product(props.row.id)" title="确定复制该产品吗？">
              <el-button slot="reference" type="text" size="small" style="margin-left: 10px">复制</el-button>
            </el-popconfirm>

            <el-button slot="reference" type="text" size="small" style="margin-left: 10px" @click="tankuang_editproduct(props.row.id,props.row.productName)">编辑名称</el-button>

          </template>
        </el-table-column>

      </el-table>
      <!--部门数据列表 end-->
      <div class="area-box">
        <div class="area-b">
          <!--<el-form-item class="form-btn-area">
              <el-button @click="addDataDialog = false">取 消</el-button>
              <el-button type="primary" @click="handleSubmit">确 定</el-button>
          </el-form-item>-->
        </div>
      </div>
    </el-form>
    <el-dialog title="面料购买" :visible.sync="fabricDialog" width="480px" :close-on-click-modal="false"
               class="fabric-dialog">
      <el-form :model="fabricFrom" ref="addSectionForm" label-width="100px" class="fabric-form">
        <el-form-item label="面料编号：" required>
          <el-input v-model="fabricFrom.number" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="当前库存：" required>
          <el-input v-model="fabricFrom.inventory" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="购买米数：" required>
          <el-input v-model="fabricFrom.buy" placeholder="请输入购买米数"></el-input>
          <p class="p-text">详情请参照<a href="#">《单耗对照表》</a></p>
        </el-form-item>
        <el-form-item class="form-btn-area">
          <el-button @click="fabricDialog = false">取 消</el-button>
          <el-button type="primary" @click="enterBuyFabric">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog title="修改产品名称" :visible.sync="isproductedit" width="480px" :close-on-click-modal="false"
               class="fabric-dialog">
      <el-form :model="fabricFrom" ref="addSectionForm" label-width="100px" class="fabric-form">
        <el-form-item label="产品名称：" required>
          <el-input v-model="edit_productname"></el-input>
        </el-form-item>
<!--        <el-form-item label="当前库存：" required>-->
<!--          <el-input v-model="fabricFrom.inventory" disabled="disabled"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="购买米数：" required>-->
<!--          <el-input v-model="fabricFrom.buy" placeholder="请输入购买米数"></el-input>-->
<!--          <p class="p-text">详情请参照<a href="#">《单耗对照表》</a></p>-->
<!--        </el-form-item>-->
        <el-form-item class="form-btn-area">
          <el-button @click="isproductedit = false">取 消</el-button>
          <el-button type="primary" @click="enter_edit_product">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import Qs from "qs";
import {deleteAction, postAction, getAction} from '@/api/manage'

let storage = window.localStorage;
import {
  getDepartment,
  getdepartProductList,
  getFabricList,
  getProductlist,
  query_AllembroiderColor,
  query_AllembroiderFont,
  query_localtion
} from '@/api/group-order';
// import {getAction} from "../../../api/manage";

export default {
  name: 'productInfo',
  data() {
    return {
      search_fabricCode:'',//面料的搜索编码
      edit_productId:'',
      edit_productname:'',
      xiuziType: '', // 绣字类型
      autohor_token: localStorage.getItem("token"), //token
      url: {
        fabricTen: '/teamOrder/listTenFabric',
        getXiuziList: '/fabricAndOther/listXiuziHandler', // 绣字位置
        proDetail: '/teamOrder/proDetail', // 产品详情
      },
      loaded: false,
      // 部门列表
      departmentList: [],
      //服装列表
      clothingList: [],
      clothingPageNo: 1,
      clothingPageSize: 10,
      clothingTotal: 0,
      //面料列表
      fabricList: [],
      //绣字位置
      fontLocaltionList: [],
      // 字体列表
      fontList: [],
      // 颜色列表
      colorList: [],
      // 产品表单数据
      proFrom: {
        departmentId: null,
        proType: '', // 之前是1
        shortName: '',
        sex: '', // 之前是0
        productCode: '',
        productId: '',
        categoryids: '',
        fabricId: '',
        fabricBuyMun: 10,
        fontLocaltion: '0',
        oneXZ: '',
        twoXZ: '',
        fontId: '',
        colorId: '',
        name: '',
        phone: '',
        address: '',
        remark: ''
      },
      //部门列表数据
      tableData: [],
      // 面料选择
      fabricDialog: false,
      isproductedit: false,
      //面料表单
      fabricFrom: {
        img: require('@/assets/img/group-order/u874.jpg'),
        inventory: '223167m',
        number: 'LISQ007',
        buy: 10
      }
    };
  },
  created() {
    let that = this;
    //获取部门
    getDepartment({
      customerId: storage.getItem('customerId'),
      pageSize: 1000,
      pageNo: 1
    }).then(res => {
      if (res.status == 200 && res.data.code == 0) {
        that.loaded = true;
        let getData = res.data.data;
        getData.records.forEach(v => {
          that.departmentList.push(v);
        });
      }
    });
    // 获取产品
    that.getProductListFun();

    that.getTenFabricList() // 获取面料列表
    // that.getFontHeightList() // 获取绣字位置

    // 获取字体文字版
    /*query_AllembroiderFont({type: 0}).then(res=>{
        console.log(res);
    });*/

  },
  methods: {
    search_fabrice(){
      // alert(this.search_fabricCode)
      let that = this
      getAction(domain.publicUrl + that.url.fabricTen, {
        'token': that.autohor_token,
        'code':this.search_fabricCode
      }).then(res => {
        if (res.data.code == '0') {
          // alert(res.data.data)
          this.fabricList = res.data.data
        }
      })
    },
    // 前往定制项详情页面
    gotoDetailFunc(id) {
      this.$router.push({path: '/MyOrderSubsystem/CustomizesInfo', query: {product: id}})
    },
    /**
     * @Date: 2020-11-04 21:13:58
     * @LastEditors: qwguo
     * @description: 获取绣字字体
     * @param {type} 参数说明
     * @return: 返回值
     */
    getallFontList(categoryids) {
      let that = this;
      that.fontList = [];
      // 获取字体图片版
      query_AllembroiderFont({type: 0, category_ids: categoryids}).then(res => {
        if (res.status == 200 && res.data.code == 0) {
          that.loaded = true;
          let getData = res.data.data;
          getData.forEach(v => {
            that.fontList.push(v);
          });
        }
      });
    },
    /**
     * @Date: 2020-11-04 21:13:58
     * @LastEditors: qwguo
     * @description: 获取绣字颜色
     * @param {type} 参数说明
     * @return: 返回值
     */
    getallFont_colorList(categoryids) {
      let that = this;
      that.colorList = [];
      // 获取绣字颜色
      query_AllembroiderColor({type: 0, category_ids: categoryids}).then(res => {
        if (res.status == 200 && res.data.code == 0) {
          that.loaded = true;
          let getData = res.data.data;
          getData.forEach(v => {
            that.colorList.push(v);
          });
        }
      });
    },
    /**
     * @Date: 2020-11-04 22:11:16
     * @LastEditors: qwguo
     * @description: 打开布料购买弹窗
     * @param {type} 参数说明
     * @return: 返回值
     */
    buyFabric(item) {
      let that = this,
          fabricFrom = that.fabricFrom;
      for (let k in item) {
        fabricFrom[k] = item[k];
      }
      this.fabricDialog = true;
    },
    /**
     * @Date: 2020-11-04 22:11:49
     * @LastEditors: qwguo
     * @description: 确认布料购买米数
     * @param {type} 参数说明
     * @return: 返回值
     */
    enterBuyFabric() {
      this.fabricDialog = false;
      this.proFrom.fabricBuyMun = this.fabricFrom.buy;
    },
    /**
     * @Date: 2020-11-04 22:12:26
     * @LastEditors: qwguo
     * @description: 更改当前部门
     * @param {type} 参数说明
     * @return: 返回值
     */
    selectDepartmentFun() {
      this.getDepartmentProList();
    },
    /**
     * @Date: 2020-11-04 21:13:58
     * @LastEditors: qwguo
     * @description: 获取绣字位置列表
     * @param {type} 参数说明
     * @return: 返回值
     */
    getFontlocaltionList() {
      let that = this;
      query_localtion({
        // category_ids: that.proFrom.productId
        category_ids: that.categoryids
      }).then(res => {
        that.proFrom.fontLocaltion = ''
        that.fontLocaltionList = res.data.data
      });
    },

    /**
     * 查询选中的产品详情
     */
    proDetailFunc() {
      let that = this
      getAction(domain.publicUrl + that.url.proDetail, {
        'id': that.proFrom.productId
      }).then(res => {
        if (res.data.code == '0') {
          that.categoryids = res.data.data.categoryIds
          that.getFontlocaltionList()
          this.getallFontList(that.categoryids);
          this.getallFont_colorList(that.categoryids);
        }
      })
    },

    /*/!**
     * 获取绣字位置
     *!/
    getFontHeightList(productid) {
        let that = this
        getAction(domain.publicUrl + that.url.getXiuziList, {'categoryID': '文字'}).then(res => {
            if (res.data.code == '0') {
                that.fontLocaltionList = res.data.data
            }
        })
    },*/
    /**
     * @Date: 2020-11-04 19:40:38
     * @LastEditors: qwguo
     * @description: 获取产品列表
     * @param {type} 参数说明
     * @return: 返回值
     */
    getProductListFun() {
      let that = this;
      let j = {
        pageSize: that.clothingPageSize,
        pageNo: that.clothingPageNo,
        sex: that.proFrom.sex,
        productType: that.proFrom.proType,
        productCode: that.proFrom.productCode
      };
      if (that.proFrom.productCode) {
        j.productCode = that.proFrom.productCode;
      }
      that.clothingList.splice(0, that.clothingList.length);
      getProductlist(j).then(res => {
        if (res.status == 200 && res.data.code == 0) {
          that.loaded = true;
          let getData = res.data.data;
          that.clothingTotal = getData.total;
          getData.records.forEach(v => {
            that.clothingList.push(v);
          });
        }
      });
    },
    /**
     * @Date: 2020-11-04 20:51:14
     * @LastEditors: qwguo
     * @description: 更改搜索类型
     * @param {type} 参数说明
     * @return: 返回值
     */
    changeSearchType() {
      this.clothingTotal = 0;
      this.clothingPageNo = 1;
      this.getProductListFun();
    },
    /**
     * @Date: 2020-11-04 20:51:26
     * @LastEditors: qwguo
     * @description: 更改页码
     * @param {type} 参数说明
     * @return: 返回值
     */
    clothingChangePage(index) {
      this.clothingTotal = 0;
      this.clothingPageNo = index;
      this.getProductListFun();
    },
    /**
     * @Date: 2020-11-04 21:07:57
     * @LastEditors: qwguo
     * @description: 搜索产品
     * @param {type} 参数说明
     * @return: 返回值
     */
    changeSearch() {
      this.clothingTotal = 0;
      this.getProductListFun();
    },
    /**
     * @Date: 2020-11-04 21:09:32
     * @LastEditors: qwguo
     * @description: 选择服饰
     * @param {type} 参数说明
     * @return: 返回值
     */
    selectClothing(index) {
      this.proDetailFunc()
      // this.getFontlocaltionList();
    },
    /**
     * @Date: 2020-11-04 22:08:54
     * @LastEditors: qwguo
     * @description: 把添加到部门
     * @param {type} 参数说明
     * @return: 返回值
     */
    addProductDepartment() {
      let that = this,
          proFrom = that.proFrom,
          text = false;
      if (!proFrom.departmentId) {
        text = '请选择采购项';
      }
      if (!text) {
        if (proFrom.proType == 1 && !proFrom.productId) {
          text = '请选择产品';
        }
      }
      if (proFrom.proType == 3 && !text && !proFrom.fabricId) {
        text = '请选择面料';
      }
      if (text) {
        // that.$message({
        //     showClose: true,
        //     message: text,
        //     type: 'warning'
        // });
        this.$message.warning(text);
        return false;
      } else {
        getAction(domain.publicUrl + '/teamOrder/addProductDepart', {
          token: that.autohor_token,
          productId: proFrom.productId,
          customerDepartId: proFrom.departmentId,
          remark: proFrom.remark,
          xiuziOneNeirong: proFrom.oneXZ,
          xiuziTwoNeirong: proFrom.twoXZ,
          xiuziWeizhi: proFrom.fontLocaltion,
          xiuziColor: proFrom.colorId,
          xiuziZiti: proFrom.fontId,
          fabricId: proFrom.fabricId,
          numbers: proFrom.fabricBuyMun,
          proName: proFrom.proName,
          'xiuziType': that.xiuziType

        }).then(res => {
          if (res.data.code == '0') {
            this.$message.success("添加成功");
            that.getDepartmentProList();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        /*addProductToDepart({
            token: that.autohor_token,
            productId: proFrom.productId,
            customerDepartId: proFrom.departmentId,
            remark: proFrom.remark,
            xiuziOneNeirong: proFrom.oneXZ,
            xiuziTwoNeirong: proFrom.twoXZ,
            xiuziWeizhi: proFrom.fontLocaltion,
            xiuziColor: proFrom.colorId,
            xiuziZiti: proFrom.fontId,
            fabricId: proFrom.fabricId,
            numbers: proFrom.fabricBuyMun
        }).then(res => {
            if (res.data.code == 0) {
                // that.$message({
                //     showClose: true,
                //     message: '添加成功',
                //     type: 'success'
                // });
                this.$message.success("添加成功");
                that.getDepartmentProList();
            }
        });*/
      }
    },
    /**
     * @Date: 2020-11-04 22:09:44
     * @LastEditors: qwguo
     * @description: 获取部门下所有产品
     * @param {type} 参数说明
     * @return: 返回值
     */
    // getDepartmentProList() {
    //     let that = this;
    //     that.tableData.splice(0, that.tableData);
    //     getdepartProductList({
    //         departId: this.proFrom.departmentId
    //     }).then(res => {
    //         if (res.status == 200 && res.data.code == 0) {
    //             let getData = res.data.data;
    //             getData.records.forEach(v => {
    //                 that.tableData.push(v);
    //             });
    //         }
    //     });
    // },
    /**
     * @Date: 2020-11-04 22:09:44
     * @LastEditors: qwguo
     * @description: 获取部门下所有产品222
     * @param {type} 参数说明
     * @return: 返回值
     */
    getDepartmentProList() {
      let that = this;
      that.tableData.splice(0, that.tableData.length);
      let params2 = {
        departId: this.proFrom.departmentId
      };
      postAction(domain.publicUrl + "/logic/interface/query_productsBydepartId", Qs.stringify(params2)).then(res => {
        let result = res.data;
        // alert(res.data.data)
        if (result.code == 0) {
          that.loaded = true;
          let getData = res.data.data;
          getData.forEach(v => {
            that.tableData.push(v);
          });
        } else {
          // that.loaded = false;
          // let getData = res.data.data;
          // getData.forEach(v => {
          //     that.tableData.push(v);
          // });
        }
      });
    },

    /**
     * @Date: 2020-11-11 22:18:55
     * @LastEditors: qwguo
     * @description: 删除部门下的产品
     * @param {type} 参数说明
     * @return: 返回值
     */
    delete_product(id,product_ids) {
      let params2 = {
        id: id,
        product_id:product_ids
      };
      postAction(domain.publicUrl + "/logic/interface/delete_depart_products", Qs.stringify(params2)).then(res => {
        let result = res.data;
        if (result.code == 0) {
          this.$message.success("删除成功")
          this.getDepartmentProList();
        } else {
          this.$message.error("删除失败")
        }
      });
    },

    /**
     * @Date: 2020-11-11 22:18:55
     * @description: 复制该部门下的产品
     * @param {type} 参数说明
     * @return: 返回值
     */
    copy_product(id) {
      // alert(id+"==="+this.proFrom.departmentId)
      let params2 = {
        id: id,
        departId:this.proFrom.departmentId,
        token:localStorage.getItem("token")
      };
      postAction(domain.publicUrl + "/logic/interface/copy_departproducts", Qs.stringify(params2)).then(res => {
        let result = res.data;
        if (result.code == 0) {
          this.$message.success("复制成功")
          this.getDepartmentProList();
        } else {
          this.$message.error("复制失败")
        }
      });
    },

    /**
     * @Date: 2020-11-11 22:18:55
     * @description: 点击编辑弹出弹框
     * @param {type} 参数说明
     * @return: 返回值
     */
    tankuang_editproduct(id,name){
      this.isproductedit=true;
      // alert(id+"==="+name)
      this.edit_productname = name;
      this.edit_productId = id;
    },

    /**
     * @Date: 2020-11-11 22:18:55
     * @description: 编辑该部门下的产品
     * @param {type} 参数说明
     * @return: 返回值
     */
    enter_edit_product() {
      let params2 = {
        id: this.edit_productId,
        productName:this.edit_productname
      };
      postAction(domain.publicUrl + "/logic/interface/edit_departproducts_name", Qs.stringify(params2)).then(res => {
        let result = res.data;
        if (result.code == 0) {
          this.$message.success("修改产品名称成功")
          this.getDepartmentProList();
          this.isproductedit=false;
        } else {
          this.$message.error("编辑失败")
        }
      });
    },

    /**
     * @Date: 2020-11-11 22:18:55
     * @LastEditors: qwguo
     * @description: 获取面料数据
     * @param {type} 参数说明
     * @return: 返回值
     */
    getFabricListFun() {
      let that = this;
      getFabricList({}).then(res => {
        if (res.status == 200 && res.data.code == 0) {
          let getData = res.data.data;
          console.log(getData);
          getData.forEach(v => {
            that.fabricList.push(v);
          });
        }
      });
    },

    /**
     * 获取10个面料
     *
     */
    getTenFabricList() {
      let that = this
      getAction(domain.publicUrl + that.url.fabricTen, {
        'token': that.autohor_token
      }).then(res => {
        if (res.data.code == '0') {
          that.fabricList = res.data.data
        }
      })
    },

    /**
     * @Date: 2020-11-11 22:18:09
     * @LastEditors: qwguo
     * @description: 函数描述
     * @param {type} 参数说明
     * @return: 返回值
     */
    addClothingCustom() {
      if (!this.proFrom.departmentId) {
        // this.$message({
        //     message: '请选择部门',
        //     type: 'warning'
        // });
        this.$message.warning("请选择采购项");
        return false;
      }
      storage.setItem('departmentId', this.proFrom.departmentId);
      if (this.$listeners['changeShowPage']) {
        this.$emit('changeShowPage');
      }
    }
  }
};
</script>

<style lang="scss">
.GO-pro-info-wrap {
  .item-title {
    height: 27px;
    border-left: 5px solid #6f6f6f;
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    font-weight: 400;

    span {
      margin-left: 24px;
      font-size: 15px;
    }
  }

  .line-dashed {
    border-top: 1px dashed #ccc;
    margin: 20px 0;
  }

  /* 按钮单选*/
  .btn-radio-group {
    .el-radio-button {
      margin-left: 10px;

      .el-radio-button__inner {
        border: 1px solid rgba(242, 242, 242, 1);
        background-color: rgba(244, 244, 244, 1);
        color: #a2a2a2;
        border-radius: 5px;
        padding: 12px 0;
        width: 112px;
        font-weight: 400;
      }

      &:hover {
        .el-radio-button__inner {
          box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.129411764705882);
        }
      }

      &.is-active {
        .el-radio-button__inner {
          box-shadow: none;
          background-color: #303131;
          color: #fcec83;
        }
      }
    }
  }

  /*图片单选*/
  .pic-radio-group {
    .el-radio {
      border: 1px solid #ccc;
      display: inline-flex;
      vertical-align: top;

      .el-radio__input {
        display: none;
      }

      .pic-box {
        overflow: hidden;
      }

      .el-radio__label {
        display: inline-flex;
        margin-left: 0;
        padding-left: 0;
        box-sizing: border-box;
      }

      .No {
        border-radius: 3px;
        background-color: #eaeaea;
        font-size: 13px;
        position: absolute;
        padding: 3px 5px;
        font-weight: 400;
      }

      &.is-checked {
        border-color: rgba(236, 205, 39, 1);

        .No {
          background-color: rgba(255, 236, 112, 1);
          font-weight: 700;
        }
      }
    }
  }

  .clothing-custom-btn {
    margin-left: 20px;
  }

  /*男女衣服列表样式*/
  .clothes-sex-list {
    .el-radio {
      width: 170px;
      height: 212px;
      vertical-align: top;
      margin: 0 26px 26px 0;

      .el-radio__label {
        margin: 10px;
      }

      img {
        width: 156px;
        height: 156px;
      }

      .No {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .el-pagination {
      text-align: right;
    }

    .empty-box {
      padding: 20px;
      text-align: center;
    }
  }

  /*布料列表*/
  .fabric-list {
    .el-radio {
      margin-right: 10px;
      width: 133px;
      height: 170px;
      border-color: #eaeaea;

      .pic-box {
        width: 133px;
        height: 133px;
      }

      .el-radio__label {
        flex-direction: column;
      }

      .No {
        top: 0;
        right: 0;
        border-radius: 0 0 0 5px;
      }

      .inventory {
        width: 100%;
        flex-shrink: 0;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 200;
        color: #333;
      }
    }
  }

  /*字体*/
  .font-family-list {
    .el-radio {
      width: 128px;
      height: 160px;
      vertical-align: top;
      margin-right: 26px;

      .el-radio__label {
        margin: 10px;
      }

      img {
        width: 112px;
        height: 112px;
      }

      .No {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  .el-table {
    thead {
      th {
        background-color: #f9f9f9;
        color: #333333;
        font-weight: 400;
      }
    }

    tbody {
      td {
        color: #333;
      }
    }
  }

  .fabric-form {
    .el-input {
      width: 80%;
    }

    p {
      font-size: 12px;

      a {
        color: rgb(227, 180, 19);
        text-decoration: none;
      }
    }

    .form-btn-area {
      text-align: right;
    }
  }
}
</style>
